<script setup>
import {
    Edit,
    Delete,
    BellFilled,
    Search
} from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
// 导入 ExcelJS 库
import ExcelJS from 'exceljs/dist/exceljs.min.js';
//声明一个异步的函数
import {
    CourseListBySearchService,
} from '@/api/course.js'

import {
    ElMessage,
    ElMessageBox
} from 'element-plus'
import {
    TeacherListAllSerivce
} from '@/api/teacher.js'
const courses = ref([{
    "courseId": 1,
    "courseName": "",
    "courseSemester": "",
    "courseCreditHour": "",
    "teacherId": "",
    "professionId": ""
}])

const teachers = ref([{
        "teacherId":1,
        "teacherName":"",
        "teacherPhone":"",
        "teacherPhoto":"",
        "professionId":""
    }])
    const teacherAll = async () => {
        try {
            const result = await TeacherListAllSerivce();
            teachers.value = result.data;
        } catch (error) {
            ElMessage({
                type: 'error',
                message: '搜索出错',
            });
        }
    }
//分页
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(20)
const handleSizeChange = (val) => {
    pageSize.value = val;
    // professionListByPage(currentPage.value, pageSize.value);
    search();
}
const handleCurrentChange = (val) => {
    currentPage.value = val;
    // professionListByPage(currentPage.value, pageSize.value);
    search();
}

// professionListByPage();
onMounted(() => {
    teacherAll();
    search();
});

//添加数据模型
const courseModel = ref({
    courseName: '',
    courseSemester: '',
    courseCreditHour: '',
    teacherId: null,
    professionId: null,
    teacherName:''
})



const handleSelectionChange = (val) => {
    multipleSelection.value = val
}


//搜索
const input = ref("");
const select = ref("1");

const search = async () => {
    try {
        const result = await CourseListBySearchService(input.value, select.value, currentPage.value, pageSize.value);
        courses.value = result.data.rows;
        total.value = result.data.total;
        courses.value.forEach(course => {
            const teacher = teachers.value.find(teacher => teacher.teacherId === course.teacherId);
            if(teacher){
                course.teacherName = teacher.teacherName;
            }
        })

    } catch (error) {
        ElMessage({
            type: 'error',
            message: '搜索出错',
        });
    }
}



</script>
<template>
    <div class="card-container">
        <el-card class="page-container">
            <template #header>
                <div class="header">
                    <span style="font-size: 14px;"><b>课程查看</b></span>
                    <div class="extra">
                        <el-input v-model="input" placeholder="请输入" class="input-with-select">
                            <template #prepend>
                                <el-select v-model="select" placeholder="课程名称" style="width: 115px">
                                    <el-option label="课程名称" value="1" />
                                    <el-option label="课程老师" value="2" />
                                </el-select>
                            </template>

                            <template #append>
                                <el-button :icon="Search" @click="search(input, select, currentPage, pageSize)" />
                            </template>

                        </el-input>
                    </div>
                </div>
            </template>


            <el-table :data="courses" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="序号" width="150" type="index"> </el-table-column>
                <el-table-column label="课程名称" prop="courseName"></el-table-column>
                <el-table-column label="开设学期" prop="courseSemester"></el-table-column>
                <el-table-column label="课程学分" prop="courseCreditHour"></el-table-column>
                <el-table-column label="课程老师" prop="teacherName"></el-table-column>
                <template #empty>
                    <el-empty description="没有数据" />
                </template>
            </el-table>
        </el-card>
    </div>
    <el-pagination class="el-p" v-model:current-page="currentPage" v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]" :background="true" layout="jumper,total, sizes, prev, pager, next " :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />




</template>

<style lang="scss" scoped>
.card-container {
    height: 520px;
    /* 设置合适的固定高度 */
    overflow: auto;
}

.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .extra {
            display: flex;
            align-items: center;


        }
    }
}

.custom-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.el-p {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
}

.input-with-select {
    background-color: var(--el-fill-color-blank);
}

// 调整样式
:deep(.ql-editor) {
    min-height: 180px;
}

:deep(.ql-formats) {
    height: 21px;
    line-height: 21px;
}
</style>